<template>
  <div class="notice-detail-container">
    <div class="notice-content">
      <div class="title">
        <h2>{{detail.noticeTitle}}</h2>
        <div class="detail">
          <span>{{detail.createtime}}</span>
          <span>撰稿人：{{detail.creator}}</span>
        </div>
      </div>
      <div class="content volunteer-content" v-if="detail.type">
        <img src="../../../assets/images/volunteer-img.webp" alt="">
        <p>为进一步弘扬“人道、博爱、奉献”的志愿者精神，壮大志愿者队伍，大力开展扶危济困、助残敬老、关爱生命等活动，推进志愿者事业发展，积极营造良好的活动氛围，现面向社会招募志愿者。</p>
        <h3>招募条件</h3>
        <p>凡我社区18周岁以上公民，不分职业、种族、宗教，遵守中国法律、法规，不计报酬。</p>
        <h3>志愿服务范围</h3>
        <p>志愿者协助社区开展人道服务、社会救助工作，选择参加社区组织的健康关怀、人道救助等志愿服务工作。</p>
        <h3>报名方法</h3>
        <p>相关个人信息进行登记，经过申请，成为社区志愿者，社区办公室现场登记或咨询，咨询电话 XXX-XXXXXXXX</p>
        <p>热诚欢迎社会各界朋友加入志愿服务行列，献出您的爱心，发挥个人所长，您的爱心和善举将受人敬仰，在群众中树立榜样。让我们携起手来，汇聚起人道的力量，为更多需要帮助的人们撑起一片蓝天，共创和谐社会、共享美好生活！人人都是志愿者，人人都是受益者。</p>
      </div>
      <div class="content" v-else>
        <img :src="`${imgBaseUrl}${detail.noticePic}`" alt=""/>
        <p>{{detail.noticeContent}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
	mapState
} from 'vuex'
export default {
  name: "noticeDetail",
  data() {
		return {
			imgBaseUrl: process.env.VUE_APP_IMG_URL
    }
  },
  computed:{
    ...mapState({
      detail:state=>state.index.noticeDetail
    })
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/style/variable.scss";
.notice-detail-container{
  height: 100%;
  background-color: $bg-gray;
  overflow: auto;
  .notice-content{
    padding: 50px 0;
    width: 660px;
    margin: 0 auto;
  }
  .title{
    margin-bottom: 50px;
    h2{
      font-size: 40px;
      margin-bottom: 10px;
    }
    .detail{
      span{
        font-size: 22px;
        margin-right: 60px;
      }
    }
  }
  .content{
    p{
      font-size: 26px;
    }
    img{
      display: block;
      width: 100%;
      margin-bottom: 30px;
    }
    &.volunteer-content{
      p{
        text-indent: 2em;
      }
      h3{
        text-align: center;
        margin: 50px 0 20px;
      }
    }
  }
}
</style>